<template>
	<div class="scroll">
<<<<<<< HEAD
		<ul class="scroll-one">
			<li v-for="item in scrolllist" :key="item.id"  class="scroll-ones">
				<router-link to="/">
					<p>
						<span>{{item.txt}}</span>
						<br>
						<span>{{item.txts}}</span>
					</p>
					<ol>
						<li v-for="itemr in item.lists" :key="itemr.id">
							<router-link to="/">
								{{itemr.txt}}
							</router-link>
						</li>
					</ol>
				</router-link>
			</li>
		</ul>
		<ul class="scroll-two">
			<li v-for="item in scrolllistr" :key="item.id"  class="scroll-twos">
				<router-link to="/">
					<p>
						<span>{{item.txt}}</span>
					</p>
					<ol>
						<li v-for="itemr in item.lists" :key="itemr.id">
							<router-link to="/">
								{{itemr.txt}}
							</router-link>
						</li>
					</ol>
				</router-link>
=======
		<h3>
			游侠<br />攻略
		</h3>
		<ul :class="{animationTop}">
			<li v-for="item in scrollList" :key='item.id'>
				<span></span>{{item.title}}
>>>>>>> 199227e (脚手架)
			</li>
		</ul>
	</div>
</template>

<script>
<<<<<<< HEAD
	export default{
		name : 'Scroll',
		data(){
			return{
				scrolllist:[
					{id:1,txt:"主题游",txts:'个性独创',lists:[
						{id:1,txt:"户外游"},
						{id:2,txt:"摄影游"},
						{id:3,txt:"亲子游"},
						{id:4,txt:"野奢邦"},
						{id:5,txt:"瑜伽行"},
						{id:6,txt:"活动赛事"},
					]},
				],
				scrolllistr:[
					{id:1,txt:"定制游",lists:[
						{id:1,txt:"签证"},
						{id:2,txt:"邮轮"},
						{id:3,txt:"美宿度假"},
					]},
				]
=======
	export default {
		name:'Scroll',
		data(){
			return {
				animationTop:false,
				scrollList : [
					{ id:1 , title:'港珠澳大桥怎么走？穿梭巴士预约及过关全攻略' },
					{ id:2 , title:'杭州动物园里有哪些动物？跟着自然老师一起去探索吧' },
					{ id:3 , title:'清迈旅游落地签如何确定？带你了解泰北旅游小贴士' },
					{ id:4 , title:'跨国骑行初体验——日本富士山骑行攻略' },
					{ id:5 , title:'港珠澳大桥怎么走？穿梭巴士预约及过关全攻略' },
					{ id:6 , title:'杭州动物园里有哪些动物？跟着自然老师一起去探索吧' },
					{ id:7 , title:'清迈旅游落地签如何确定？带你了解泰北旅游小贴士' },
					{ id:8 , title:'跨国骑行初体验——日本富士山骑行攻略' },
				]

			}
		},
		mounted(){
			setInterval(this.showList,2000)
		},
		methods:{
			//每隔2秒，数据向上滚动一条
			//2秒之内，将移除的数据剪到数组的最后一条；animation恢复成false(才能保证下一次执行滚动的时候有动态效果)
			showList(){
				//每隔2秒，将当前的第一条数据移出-0.67rem
				this.animationTop = true
				//在2秒之间，执行：500毫秒之后，将当前数组的第一条数据添加到数组的末尾
				setTimeout( ()=>{
					this.scrollList.push(this.scrollList[0])
					this.scrollList.shift()
					this.animationTop = false
				},500)
>>>>>>> 199227e (脚手架)
			}
		}
	}
</script>

<<<<<<< HEAD
<style scoped>
.scroll{
	width: 100%;
	position: relative;
	bottom: 1rem;
	background-color:white;
	border-radius: 0 0 0.5rem 0.5rem;
}
.scroll-one {
	width: 100%;
	}
.scroll-ones{
	width: 100%;
	text-align: center;
}
.scroll-ones p{
	border-radius:0.3rem  0 0 0;
	background-image: url(../../../assets/img/index_nav_01.82fac2d4.png);
	background-size: 100% 100%;
	width: 28%;
	height: 2.8rem;
	border: 0.02rem solid white;
	margin-left: 0.29rem;
}
.scroll-one p span{
	font-size: 0.4rem;
	position: relative;
	font-weight: bold;
}
.scroll-one p span:first-child{
	position: relative;
	bottom:-1rem;
}
.scroll-one p span:nth-child(3){
	width: 1rem;
	border-radius: 1rem;
	font-size: 0.25rem;
	background-color: #FFD700;
}
.scroll-ones ol{
	width:70%;
	margin-left: 0.5rem;
	position: relative;
	left: 2.22rem;
	bottom: 2.85rem;
	
}
.scroll-ones ol li{
	width:30%;
	line-height: 1.30rem;
	border: 0.01rem solid white;
	float: right;
	font-size: 0.35rem;
	font-weight: bold;
}
.scroll-ones ol li:first-child{
	border-radius: 0 0.2rem 0 0;
	background-image:url(../../../assets/img/index_nav_02.a65092c6.png);
	background-size: 100% 100%;
}
.scroll-ones ol li:nth-child(2){
	background-image:url(../../../assets/img/index_nav_03.92ef4c76.png);
	background-size: 100% 100%;
}
.scroll-ones ol li:nth-child(3){
	background-image:url(../../../assets/img/index_nav_03.92ef4c76.png);
	background-size: 100% 100%;
}
.scroll-ones ol li:nth-child(4){
	background-image:url(../../../assets/img/index_nav_01.82fac2d4.png);
	background-size: 100% 100%;
}
.scroll-ones ol li:nth-child(5){
	background-image:url(../../../assets/img/index_nav_04.c8b118c8.png);
	background-size: 100% 100%;
}
.scroll-ones ol li:last-child{
	background-image:url(../../../assets/img/index_nav_04.c8b118c8.png);
	background-size: 100% 100%;
}
.scroll-twos{
	text-align: center;
}
.scroll-twos p{
	border-radius:0.3rem  0 0 0;
	background-image: url(../../../assets/img/index_nav_08.8633db5b.png);
	background-size: 100% 100%;
	border-radius: 0 0 0 0.2rem;
	width: 28%;
	height: 1.30rem;
	border: 0.02rem solid white;
	margin-left: 0.29rem;
	
}
.scroll-twos p span{
	padding-left: 0.4rem;
	position: relative;
	left: 0rem;
	bottom: 2.3rem;
	font-size: 0.4rem;
	font-weight: bold;
	}
.scroll-twos li{
	float: left;
	line-height: 1.30rem;
	border: 0.01rem solid white;
	width:30.5%;
	font-size: 0.35rem;
	font-weight: bold;
}
.scroll-twos ol{
	width:70%;
	margin-left: 0.5rem;
	position: relative;
	left: 2.66rem;
	bottom: 2.85rem;
}
.scroll-twos li:first-child{
	background-image: url(../../../assets/img/index_nav_01.82fac2d4.png);
	background-size: 100% 100%;
}
.scroll-twos li:nth-child(2){
	background-image: url(../../../assets/img/index_nav_10.2f5c92d2.png);
	background-size: 100% 100%;
}
.scroll-twos li:last-child{
	background-image: url(../../../assets/img/index_nav_10.2f5c92d2.png);
	background-size: 100% 100%;
	border-radius: 0 0 0.2rem 0;
}
=======
<style>
	/* 动画样式 */
	.scroll .animationTop{
		margin-top: -0.67rem;
		height: 2.17rem;
		transition: all 0.5s;
	}
	.scroll{
		width: 100%;
		height: 1.4rem;
		/* 渐变发生在背景图片上的样式 */
		background-image:linear-gradient(#fbffaf,#ffffed);
		overflow: hidden;
	}
	.scroll h3{
		height: 1.5rem;
		width: 15%;
		font-size: 0.5rem;
		display: flex;
		float: left;
		align-items: center;
		justify-content: center;
		color: gold;
		font-style: italic;
		font-weight: bold;
	}
	.scroll ul{
		float: left;
		width: 78%;
		margin-left: 0.4rem;
		height: 2.17rem;
	}
	.scroll ul li{
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 0.35rem;
		line-height: 0.67rem;
	}
	.scroll ul li span{
		display: inline-block;
		width: 0.2rem;
		height: 0.2rem;
		border-radius: 0.1rem;
		background-color: goldenrod;
		margin-right: 0.2rem;
	}
>>>>>>> 199227e (脚手架)
</style>
